<template>
	<view class="content">
		<view>
			<!-- <video id="myVideo" :src="curCourse.video_url"></video> -->
			<view class="player-wrap">
				<view class="player">
					<polyv-player ref="polyvPlayer" :id="id" :playerId="playerId" :vid="videoInfo.vid" :width="width"  :viewerInfo="viewerInfo" :showControls="true"   :autoplay="true"
					 :ts="videoInfo.ts" :sign="videoInfo.sign" :marqueeConfig="marqueeConfig" @statechange="statechange" @timeupdate="timeupdate" @error="error">
					</polyv-player>
			<!-- 		<button @click="seek">跳转到 30 s</button>
					<button @click="getCurrentTime">获取当前播放时间</button>
					<button @click="changeVid">切换视频</button> -->
				</view>
			</view>
			
		</view>
		
		<view class="show pt10">
			<view class="title">{{curCourse.course_name || ''}}</view>
		</view>	
		<view class="pn">
			<text @click="prev" class="prev"><text></text>上一节</text>
			<text @click="next" class="next">下一节</text>
		</view>
		<view class="show bor10">
			<uni-collapse :accordion="true">
				
				<uni-collapse-item :show-animation="false" :title="item.typename" show-extra-icon="true"  v-for="(item,index) in coursekc" :key="index" >
					<!-- <view class="outline uni-ellipsis" v-show="item" v-for="(itemMsg,indexMsg) in item.downname" :key="indexMsg" @click= "chooseVideo(itemMsg,'/pages/jyclass/video')">
						{{itemMsg.s_name}}
					</view> -->
					<view>
					<uni-collapse :accordion="true">
						<uni-collapse-item :show-animation="false" :title="ditem.s_name" show-extra-icon="true"  v-for="(ditem,dindex) in item.downname" :key="dindex" >							
							<view class="outline uni-ellipsis" v-show="item" v-for="(itemMsg,indexMsg) in ditem.downcouse" :key="indexMsg" @click= "chooseCourse(itemMsg)">
								{{itemMsg.course_name}}
							</view> 
						</uni-collapse-item>
					</uni-collapse>
					</view>
				</uni-collapse-item>
				<!-- <uni-collapse-item :show-animation="true" :title="item.typename" show-extra-icon="true"  v-for="(item,index) in coursekc" :key="index" >
					<view class="outline uni-ellipsis" v-show="item" v-for="(itemMsg,indexMsg) in item.downname" :key="indexMsg" @click="chooseCourse(itemMsg)">
						{{itemMsg.s_name}}
					</view>
				</uni-collapse-item> -->
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	export default{
		components: {
			uniCollapse,
			uniCollapseItem,
		},
		data() {
			return {
				id: 'polyvPlayer',
				playerId: 'polyvPlayer',
				videoInfo: {},//播放视频所需参数
				/* vid: 'c376e8da8e24fb3118ce50a145842fa8_c',
				ts: 1630469086000,
				sign: '2633b4d25e4d22cc49468cef17c28e01', */
				width: '100%',
				height: '100%',
				viewerInfo: { // 自定义观众信息
				/*  viewerId: '3116002084', // 观众ID
				  viewerName: 'Dreamer001', // 观众昵称
				  viewerAvatar: 'https://livestatic.videocc.net/assets/wimages/missing_face.png', // 观众头像URL
				  viewerExtraInfo1: 'param3', // 自定义额外信息字段1
				  viewerExtraInfo2: 'param4', // 自定义额外信息字段2
				  viewerExtraInfo3: 'param5' // 自定义额外信息字段3 */
				},
				marqueeConfig: {
				  text: '',
				  fontColor: '#ccc'
				},
				polyvPlayerContext: '',
				
				
				
				items: [
					'课程大纲',
					'课程详情',
					'课程评论'
				],
				outline1: [],
				title:"互联网行业发展趋势为什么要学习编程",
				
				coursekc: [],
				nav_id: '',//课程id
				curCourse: {},//当前选择的课程
				detail: {},
				loading: false,
			};
		},
		onLoad(option) {
			console.log('视频播放',option);
			if(!option){
				
				return false;
			}
			this.nav_id = option.nav_id;
			this.curCourse = option;
			if(this.curCourse.course_name){
				this.curCourse.s_name = this.curCourse.course_name;
			}
			if(!this.$mHelper.checkBindPhone()){
				return false;
			}
			
			
			this.loadData();
			uni.setNavigationBarTitle({
				title: this.curCourse.course_name
			});
			/* this.loadData();
			uni.setNavigationBarTitle({
				title: "阶段一：编程之道"
			}); */
			
			this.initPlay();
			this.getVideoParams(this.curCourse.course_id);
			
		},
		onShow(){
			// this.doOnLogin();
			this.loading = false;
		},
		onReady() {
			let t = this;
			
			
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods: {
			
			/**
			 * 播放视频
			 */
			initPlay(){
				// #ifdef MP-WEIXIN
				// 组件ID: id 设置为 'polyvPlayer'，所以下面写成 '#polyvPlayer'
				this.polyvPlayerContext = this.selectComponent('#polyvPlayer');
				// this.polyvPlayerContext = this.$scope.selectComponent('#polyvPlayer'); // 通过插件的自定义组件ID获取
				// console.log('初始化播放视频',this.$refs.polyvPlayer,this.$scope.selectComponent('#polyvPlayer'),this.polyvPlayerContext);
				// this.polyvPlayerContext.play();  // 播放
				// #endif
			},
			play(){
				if(!this.polyvPlayerContext){
					this.polyvPlayerContext = this.selectComponent('#polyvPlayer');
				}
				let t = this;
				t.polyvPlayerContext.play(); 
				/* setTimeout(function(){
					t.polyvPlayerContext.play() ;  // 播放
				},100) */
				
				
			},
			statechange(e) {
				console.log('播放状态变更',e);
				
			},
			timeupdate(e) {
				/* console.log('播放进度变化');
				console.log(e.detail); */
			},
			error(e) {
				console.log('视频播放出错',e);
				
			},
			seek() {
				this.polyvPlayerContext.seek(30);
			},
			getCurrentTime() {
				console.log(this.polyvPlayerContext.getCurrentTime());
			},
			
			
			doOnLogin(){
				if(!this.hasLogin){
					uni.showModal({
						title: "提示",
						content: "您还没有登录，请先登录？",
						showCancel: true,
						confirmText: "确定",
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({  
									url: '/pages/user/login'  
								})
							} else if (res.cancel) {
								uni.switchTab({  
									url: '/pages/index/index'  
								})
							}
						}
					});
					return ;
				}
			},
			
			/* async loadData() {
				let outline1 = await this.$api.json('outline1');
				this.outline1 = outline1;
			},
			 */
			async loadData() {
				/* let coursekc = await this.$api.json('coursekc');
				this.coursekc = coursekc; */
				await this.$http.post('api/common/navdetail',{id: this.nav_id}).then(res=>{
					if(res.code === this.sucCode){
						this.detail = res.data.course_data || {};
						this.coursekc = res.data.xgcourse || [];
						
					}else{
						this.$mHelper.toast(res.msg);
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			
			/**
			 * 通过播放的课程id获取保利威直播参数
			 */
			async getVideoParams(sectionId){
				// let sectionId = this.curCourse.course_id;//课程小节id
				if(!sectionId){
					this.$mHelper.toast('课程小节不存在！');
					return false;
				}
				if(this.loading){
					
					return false;
				}
				this.loading = true;
				await this.$http.post('api/common/video',{id: sectionId}).then(res=>{
					this.loading = false;
					if(res.code === this.sucCode){
						let _data = res.data || {};
						//先检查是否是免费课程
						console.log('先检查是否是免费课程',_data.course_data)
						if(!this.checkBuy(_data.course_data)){
							return false;
						}
						this.videoInfo = res.data || {}; 
						this.curCourse = res.data.course_data;
						this.play();
						uni.setNavigationBarTitle({
							title: this.curCourse.course_name
						});
					}else{
						this.$mHelper.toast(res.msg);
					}
				}).catch(err=>{
					console.log(err);
					this.loading = false;
				})
				
			},
			
			checkBuy(item){
				let t = this;
				// console.log('选择课程',item.free,t.detail);
				if(item.free == 0 && t.detail.is_buy == 0){
					
					uni.showModal({
						title: "您还没有购买课程",
						content: "立即购买",
						showCancel: true,
						confirmText: "确定购买",
						success:(res)=>{
							if(res.confirm){
								// console.log('确定购买')
								t.$mHelper.navTo('/pages/order/index','push',{id:t.nav_id});
							
							}
						}
					});
					return false;
				}
				return true;
				
				
			},
			
			/**
			 * 选择课程播放
			 * @param {Object} item
			 */
			chooseCourse(item){
				let t = this;
				
				if(!t.checkBuy(item)){
					return false;
				}
				
				//更换课程
				console.log('更换课程',item);
				this.curCourse = item;
				uni.setNavigationBarTitle({
					title: this.curCourse.course_name
				});
				
				this.getVideoParams(item.course_id);
				
				/* this.course = this.content.courses[index];
				if(this.course.isFree){
					this.check = true;
				}else{
					this.check = false;
					this.$api.memberGet('/course/check',{courseId: this.course.id}).then(r=>{
						if(r.data.body == 'true'){
							this.check = true;
						}else{
							//需要购买
							uni.showModal({
								title: "您还没有购买课程",
								content: "立即购买",
								showCancel: true,
								confirmText: "确定购买",
								success:(res)=>{
									if(res.confirm){
										this.buy();
									}else{
										uni.navigateBack();
									}
								}
							})
						}
					})
				} */
			},
			/**
			 * 播放下一个
			 */
			next(){
				let nextId = this.videoInfo.next_data;//下一节id
				if(!nextId){
					this.$mHelper.toast('没有下一个了！')
					return false;
				}
				
				/* if(!this.checkBuy(item)){
					return false;
				} */
				
				this.getVideoParams(nextId);
				
				
				/* this.$api.get('/content/get.php',{
					format: 0,
					topicId: this.topicId,
					id: this.id,
					next : 0 
				}).then(r=>{
					if(r.data.code == 206){
						 uni.showToast({
						    icon: 'none',
							position: 'bottom',
						    title: '已经是最后一节',
						});
					}else{
						var content = r.data.body;
						this.content = content;
						this.id = content.id;
					}
				}); */
			},
			prev(){
				let preId = this.videoInfo.prev_data;////上一节ID
				if(!preId){
					this.$mHelper.toast('没有上一个了！')
					return false;
				}
				
				this.getVideoParams(preId);
				
				/* this.$api.get('/content/get.php',{
					format: 0,
					topicId: this.topicId,
					id: this.id,
					next : 1 
				}).then(r=>{
					if(r.data.code == 206){
						 uni.showToast({
						    icon: 'none',
							position: 'bottom',
						    title: '已经是第一节',
						});
					}else{
						var content = r.data.body;
						this.content = content;
						uni.setNavigationBarTitle({
							title: content.title
						});
						this.id = content.id;
					}
				}); */
			}
		}
	}
</script>
<style>
page{background: #fff;}
video {width: 100%;}
.pn{ text-align: center;margin-bottom: 40upx;}
.prev{border:#ddd solid 1px; border-radius: 50upx;padding: 15upx 40upx;margin: 0 10upx;background: #f9f9f9;}
.next{border:#ddd solid 1px; border-radius: 50upx;padding: 15upx 40upx;margin: 0 10upx;background: #f9f9f9}


.player-wrap {
		position: relative;
		width: 100%;
		height: 600rpx ;
		/* padding-bottom: 56.25%; */
	}
	
	.player {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
</style>
